<template lang="pug">
view
	u-sticky
		view.header
			video(
				style="width:100%"
			)
			view.bg
				view.title.c6.f14 快速教您，遇到溺水人员，如何急救？
				view.flex.at.mt10
					view.c9.f12 151人浏览数
					view.c9.f12.ml 2022-05-11  17:22:36
	view.header.mt10.bg
		view.title.c6 目录
		view.flex.at.bglist.bg.mt10
			view.nums 01
			view.f14.c6 第一章：前言
			view.sk.f12.ml 试看片段
	view.header.mt10.bg
		view.title.c6 服务说明：
		view.f14.c6.mt10 本产品为虚拟内容服务,开通会员后,可免费学习
		view.kaitong.flex.at.mt10.p10
			view.c6.f14 暂未开通会员
			view.ml
				u-button(
					type="warning"
					text="去开通"
					size="mini"
					@click="kaitong"
				)
	view.bottom.flex.at.bg.bgf0
		view.w50.ct
			image(
				src="/static/xin.png",
				mode="widthFix",
				style="width:60px"
			)
			view.f12.c6 360人收藏
		view.w50.ct
			image(
				src="/static/fnxiang.png",
				mode="widthFix",
				style="width:60px"
			)
			view.f12.c6 分享
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			kaitong(){
				uni.navigateTo({
					url:'./huiyuan'
				})
			},
		}
	}
</script>

<style>
page{
	background: #f0f0f0;
}

.header{
	background: #fff;
}
.bglist{
	background: rgba(0, 224, 207, .1);
	border-radius: 6px;
}
.nums{
	background: #00E0CF;
	color: #fff;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
	font-size: 12px;
	margin-right: 10px;
}
.sk{
	border:#FAC505 solid 1px ;
	border-radius: 4px;
	color: #FAC505;
	padding: 3px 6px;
}
.kaitong{
	background: rgba(250, 197, 5, 0.2);
	border-radius: 6px;
}
</style>
